<!DOCTYPE html>
<!-- saved from url=(0031)http://www.codeboy.com/pro/jin/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<title>首页</title>
	<link rel="stylesheet" href="css/bootstrap.css">
	<script src="js/jquery.min.js"  type="text/javascript"></script>
	<script src="js/bootstrap.js" type="text/javascript"></script>	
	<script src="js/holder.js"></script>
	<link rel="stylesheet" href="./首页aaa_files/common.css">
	<link rel="stylesheet" href="./首页aaa_files/index_header.css">
	<!-- <link rel="stylesheet" href="./首页aaa_files/index_search.css"> -->
	<link rel="stylesheet" href="./首页aaa_files/index_banner.css">
	<link rel="stylesheet" href="./首页aaa_files/index_sample.css">
	<link rel="stylesheet" href="./首页aaa_files/index_venue.css">	
	<link rel="stylesheet" href="./首页aaa_files/index_outdoor.css">
	<link rel="stylesheet" href="./首页aaa_files/index_guest.css">
	<link rel="stylesheet" href="./首页aaa_files/index_footer.css">
	<link rel="stylesheet" href="./首页aaa_files/index_louceng.css">
</head>
<body>
		<div class="container-fluid">
	<!-- 头部 -->
	<header id="header"> <!-- 用于响应客户端发送的加载页面头部的请求 -->  
 
<!-- 上半部分 -->
<div class="row">
<div id="top">   
     <a href="http://www.codeboy.com/pro/jin/html/login.html">登录</a>
    <a href="http://www.codeboy.com/pro/jin/html/register.html">注册</a> 
    <a href="javascript:;">App下载</a>
</div>
<!-- 下半部分全球导航 -->
<div id="global-nav">
    <div class="global-content">
        <a href="javascript:;">
            <img src="./首页aaa_files/logo.png">
        </a>
        <ul id="sub-nav">
            <li>
                <a href="javascript:;">首页</a>
            </li>
            <li>
                <a href="javascript:;">风格展示</a>
                <ul data-trigger="choose">
                    <li>海角恋歌</li>
                    <li>浪漫星辰</li>
                    <li>遇见爱情</li>
                    <li>花漾世界</li>
                    <li>花田觅香</li>
                    <li>丛林雾语</li>
                    <li>漫步时光</li>
                    <li>漫天花语</li>
                    <li>完美假期</li>
                    <li>怦然心动</li>
                    <li class="choose-box"></li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">场馆介绍</a>
            </li>
            <li>
                <a href="javascript:;">家庭写真</a>
                <ul data-trigger="choose">
                    <li>书香门第</li>
                    <li>天伦之乐</li>
                    <li>美满之家</li>
                    <li>幸福生活</li>
                    <li>明星之家</li>
                    <li>欢聚一堂</li>
                    <li>复古丽人</li>
                    <li>非常闺蜜</li>
                    <li>元气少女</li>
                    <li>银幕宠儿</li>
                    <li class="choose-box"></li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">客照欣赏</a>
            </li>
            <li>
                <a href="javascript:;">全球旅拍</a>
                <ul data-trigger="choose">
                    <li>枫叶小镇</li>
                    <li>拉菲庄园</li>
                    <li>中央大街</li>
                    <li>群力印象</li>
                    <li>索菲亚</li>
                    <li>中华巴洛克</li>
                    <li>太阳岛</li>
                    <li>爱丽丝庄园</li>
                    <li>皇家花园</li>
                    <li class="choose-box"></li>
                </ul>
            </li>
        </ul>
    </div>
</div></header>


	<!-- 轮播模块 登录	 -->
		
		<div class="logo">
				<img src="./img/LOGO.png">
			</div>
			
			<div class="log">
			  <h2>Login</h2>
			  <form>
				<div class="inputBox">
				  <input type="username" name="username" required="">
				  <label>Username</label>
				</div>
				<div class="inputBox">
					<input type="password" name="" required="">
					<label>Password</label>
				  </div>
				<!---- <input type="submit" name="" value="Submit"> 登录-->
				  <a role="button" class="btn btn-success btn-lg" href="#">Submit</a>
				  <a role="button" class="btn btn-warning btn-lg" href="#">Register</a>
				  <!-- <input type="button" name="" value="Register" >注册 -->
			  </form>
			</div>
		  <div class="wrap" >
			<div class="left">
				<div class="prev"></div>
				<div class="next"></div>
			</div>
			<div class="right"></div>
		 </div>
		</div>
	</div>
	<!-- 样照 -->	
	<div id="sample" class="louCengShow">
		<!-- 样照大图 -->
		<div id="sample-big">
			<!-- 大图背景图 -->
			<div class="sample-big-bg">
				<img src="./首页aaa_files/sample_big.jpg" style="transform: translate3d(0px, -100px, 0px);">
			</div>
			<!-- 背景图遮挡图层 -->
			<div class="cover">
				<div></div>
				遮挡文字
				<div class="cover-text">
					<p>
						<span style="animation: 1.5s ease 0s 1 normal both running down;">S</span>
						<span style="animation: 1.5s ease 0s 1 normal both running down;">A</span>
						<span style="animation: 1.5s ease 0s 1 normal both running down;">M</span>
						<span style="animation: 1.5s ease 0s 1 normal both running down;">P</span>
						<span style="animation: 1.5s ease 0s 1 normal both running down;">L</span>
						<span style="animation: 1.5s ease 0s 1 normal both running down;">E</span>&nbsp;
						<span style="animation: 1.5s ease 0s 1 normal both running down;">P</span>
						<span style="animation: 1.5s ease 0s 1 normal both running down;">H</span>
						<span style="animation: 1.5s ease 0s 1 normal both running down;">O</span>
						<span style="animation: 1.5s ease 0s 1 normal both running down;">T</span>
						<span style="animation: 1.5s ease 0s 1 normal both running down;">O</span>
						<span style="animation: 1.5s ease 0s 1 normal both running down;">S</span>
					</p>
					<a href="http://www.codeboy.com/pro/jin/html/sample_more.html">more</a>
				</div>
				<div></div>
			</div>
		</div>
		<!-- 样照小图 -->
		<div id="sample-small">
			<div>
				<dl>
					<dt>
						<img src="./首页aaa_files/sample_1.jpg">
					</dt>
					<dd>
						<p>
							梦中婚礼<br>Dream Wedding
						</p>
					</dd>
				</dl>
				<dl>
						<dt>
							<img src="./首页aaa_files/sample_2.jpg">
						</dt>
						<dd>
							<p>
								完美假期<br>Perfect Holiday
							</p>
					</dd>
				</dl>
			</div>

			<div>
				<dl>
					<dt>
						<img src="./首页aaa_files/sample_3.jpg">
					</dt>
					<dd>
						<p>
							天生一对<br>Perfect Couple
						</p>
					</dd>
				</dl>
			</div>

			<div>
				<dl>
					<dt>
						<img src="./首页aaa_files/sample_4.jpg">
					</dt>
					<dd>
						<p>
							丛林物语<br>Jungle Mist
						</p>
					</dd>
				</dl>
				<dl>
					<dt>
						<img src="./首页aaa_files/sample_5.jpg">
					</dt>
					<dd>
						<p>
							漫步时光<br>Walking Time
						</p>
					</dd>
				</dl>
			</div>
		</div>
	</div>

	<!-- 场馆 -->
	<div id="venue" class="louCengShow">
		<!-- 标题 -->
		<div class="venue-title">六 · 大 · 场 · 馆</div>

		<!-- 图片 -->
		<div class="venue-photos">
			<div>
				<img src="./首页aaa_files/cd1.jpg" class="cd">
				<img src="./首页aaa_files/cd-bg.png" class="cd-bg">
				<p>弥花馆</p>
			</div>
			<div>
				<img src="./首页aaa_files/cd2.jpg" class="cd">
				<img src="./首页aaa_files/cd-bg.png" class="cd-bg">
				<p>雅颂馆</p>
			</div>
			<div>
				<img src="./首页aaa_files/cd3.jpg" class="cd">
				<img src="./首页aaa_files/cd-bg.png" class="cd-bg">
				<p>皇冠馆</p>
			</div>
			<div>
				<img src="./首页aaa_files/cd4.jpg" class="cd">
				<img src="./首页aaa_files/cd-bg.png" class="cd-bg">
				<p>巴比伦馆</p>
			</div>
			<div>
				<img src="./首页aaa_files/cd5.jpg" class="cd">
				<img src="./首页aaa_files/cd-bg.png" class="cd-bg">
				<p>韩国馆</p>
			</div>
			<div>
				<img src="./首页aaa_files/cd6.jpg" class="cd">
				<img src="./首页aaa_files/cd-bg.png" class="cd-bg">
				<p>维纳馆</p>
			</div>
		</div>
	</div>

	<!-- 外景 -->
	<div id="outdoor" class="louCengShow">
		<!-- 标题 -->
		<div class="outdoor-title">
			<span>人 · 气 · 外 · 景</span>
		</div>
		
		<!-- 照片 -->
		<div class="outdoor-photos">
			<ul class="cut">
				<li class="o1" style="left: 0px; top: 0px; opacity: 1;">
					<img src="./首页aaa_files/o11.png">
				</li>
				<li class="o1" style="left: 133px; top: 0px; opacity: 1;">
					<img src="./首页aaa_files/o12.png">
				</li>
				<li class="o1" style="left: 267px; top: 0px; opacity: 1;">
					<img src="./首页aaa_files/o13.png">
				</li>
				<li class="o1" style="left: 0px; top: 90px; opacity: 1;">
					<img src="./首页aaa_files/o14.png">
				</li>
				<li class="o1" style="left: 133px; top: 90px; opacity: 1;">
					<img src="./首页aaa_files/o15.png">
				</li>
				<li class="o1" style="left: 267px; top: 90px; opacity: 1;">
					<img src="./首页aaa_files/o16.png">
				</li>
				<li class="o1" style="left: 0px; top: 180px; opacity: 1;">
					<img src="./首页aaa_files/o17.png">
				</li>
				<li class="o1" style="left: 133px; top: 180px; opacity: 1;">
					<img src="./首页aaa_files/o18.png">
				</li>
				<li class="o1" style="left: 267px; top: 180px; opacity: 1;">
					<img src="./首页aaa_files/o19.png">
				</li>
				<li class="o2" style="left: 420px; top: 0px; opacity: 1;">
					<img src="./首页aaa_files/o21.png">
				</li>
				<li class="o2" style="left: 553px; top: 0px; opacity: 1;">
					<img src="./首页aaa_files/o22.png">
				</li>
				<li class="o2" style="left: 687px; top: 0px; opacity: 1;">
					<img src="./首页aaa_files/o23.png">
				</li>
				<li class="o2" style="left: 420px; top: 90px; opacity: 1;">
					<img src="./首页aaa_files/o24.png">
				</li>
				<li class="o2" style="left: 553px; top: 90px; opacity: 1;">
					<img src="./首页aaa_files/o25.png">
				</li>
				<li class="o2" style="left: 687px; top: 90px; opacity: 1;">
					<img src="./首页aaa_files/o26.png">
				</li>
				<li class="o2" style="left: 420px; top: 180px; opacity: 1;">
					<img src="./首页aaa_files/o27.png">
				</li>
				<li class="o2" style="left: 553px; top: 180px; opacity: 1;">
					<img src="./首页aaa_files/o28.png">
				</li>
				<li class="o2" style="left: 687px; top: 180px; opacity: 1;">
					<img src="./首页aaa_files/o29.png">
				</li>
				<li class="o3" style="left: 840px; top: 0px; opacity: 1;">
					<img src="./首页aaa_files/o31.png">
				</li>
				<li class="o3" style="left: 973px; top: 0px; opacity: 1;">
					<img src="./首页aaa_files/o32.png">
				</li>
				<li class="o3" style="left: 1107px; top: 0px; opacity: 1;">
					<img src="./首页aaa_files/o33.png">
				</li>
				<li class="o3" style="left: 840px; top: 90px; opacity: 1;">
					<img src="./首页aaa_files/o34.png">
				</li>
				<li class="o3" style="left: 973px; top: 90px; opacity: 1;">
					<img src="./首页aaa_files/o35.png">
				</li>
				<li class="o3" style="left: 1107px; top: 90px; opacity: 1;">
					<img src="./首页aaa_files/o36.png">
				</li>
				<li class="o3" style="left: 840px; top: 180px; opacity: 1;">
					<img src="./首页aaa_files/o37.png">
				</li>
				<li class="o3" style="left: 973px; top: 180px; opacity: 1;">
					<img src="./首页aaa_files/o38.png">
				</li>
				<li class="o3" style="left: 1107px; top: 180px; opacity: 1;">
					<img src="./首页aaa_files/o39.png">
				</li>
				<li class="o4" style="left: 0px; top: 310px; opacity: 1;">
					<img src="./首页aaa_files/o41.png">
				</li>
				<li class="o4" style="left: 133px; top: 310px; opacity: 1;">
					<img src="./首页aaa_files/o42.png">
				</li>
				<li class="o4" style="left: 267px; top: 310px; opacity: 1;">
					<img src="./首页aaa_files/o43.png">
				</li>
				<li class="o4" style="left: 0px; top: 400px; opacity: 1;">
					<img src="./首页aaa_files/o44.png">
				</li>
				<li class="o4" style="left: 133px; top: 400px; opacity: 1;">
					<img src="./首页aaa_files/o45.png">
				</li>
				<li class="o4" style="left: 267px; top: 400px; opacity: 1;">
					<img src="./首页aaa_files/o46.png">
				</li>
				<li class="o4" style="left: 0px; top: 490px; opacity: 1;">
					<img src="./首页aaa_files/o47.png">
				</li>
				<li class="o4" style="left: 133px; top: 490px; opacity: 1;">
					<img src="./首页aaa_files/o48.png">
				</li>
				<li class="o4" style="left: 267px; top: 490px; opacity: 1;">
					<img src="./首页aaa_files/o49.png">
				</li>
				<li class="o5" style="left: 420px; top: 310px; opacity: 1;">
					<img src="./首页aaa_files/o51.png">
				</li>
				<li class="o5" style="left: 553px; top: 310px; opacity: 1;">
					<img src="./首页aaa_files/o52.png">
				</li>
				<li class="o5" style="left: 687px; top: 310px; opacity: 1;">
					<img src="./首页aaa_files/o53.png">
				</li>
				<li class="o5" style="left: 420px; top: 400px; opacity: 1;">
					<img src="./首页aaa_files/o54.png">
				</li>
				<li class="o5" style="left: 553px; top: 400px; opacity: 1;">
					<img src="./首页aaa_files/o55.png">
				</li>
				<li class="o5" style="left: 687px; top: 400px; opacity: 1;">
					<img src="./首页aaa_files/o56.png">
				</li>
				<li class="o5" style="left: 420px; top: 490px; opacity: 1;">
					<img src="./首页aaa_files/o57.png">
				</li>
				<li class="o5" style="left: 553px; top: 490px; opacity: 1;">
					<img src="./首页aaa_files/o58.png">
				</li>
				<li class="o5" style="left: 687px; top: 490px; opacity: 1;">
					<img src="./首页aaa_files/o59.png">
				</li>
				<li class="o6" style="left: 840px; top: 310px; opacity: 1;">
					<img src="./首页aaa_files/o61.png">
				</li>
				<li class="o6" style="left: 973px; top: 310px; opacity: 1;">
					<img src="./首页aaa_files/o62.png">
				</li>
				<li class="o6" style="left: 1107px; top: 310px; opacity: 1;">
					<img src="./首页aaa_files/o63.png">
				</li>
				<li class="o6" style="left: 840px; top: 400px; opacity: 1;">
					<img src="./首页aaa_files/o64.png">
				</li>
				<li class="o6" style="left: 973px; top: 400px; opacity: 1;">
					<img src="./首页aaa_files/o65.png">
				</li>
				<li class="o6" style="left: 1107px; top: 400px; opacity: 1;">
					<img src="./首页aaa_files/o66.png">
				</li>
				<li class="o6" style="left: 840px; top: 490px; opacity: 1;">
					<img src="./首页aaa_files/o67.png">
				</li>
				<li class="o6" style="left: 973px; top: 490px; opacity: 1;">
					<img src="./首页aaa_files/o68.png">
				</li>
				<li class="o6" style="left: 1107px; top: 490px; opacity: 1;">
					<img src="./首页aaa_files/o69.png">
				</li>	
			</ul>

			<div style="opacity: 1;">
				<img src="./首页aaa_files/o1.png">
				<div class="box"></div>
				<div class="text">
					<h3>皇家城堡之水晶教堂</h3>
					<p>承载所有梦幻想象的魅力天堂</p>
				</div>
			</div>
			<div style="opacity: 1;">
				<img src="./首页aaa_files/o2.png">
				<div class="box"></div>
				<div class="text">
					<h3>塞纳河畔</h3>
					<p>法式轻奢江边景</p>
				</div>
			</div>
			<div style="opacity: 1;">
				<img src="./首页aaa_files/o3.png">
				<div class="box"></div>
				<div class="text">
					<h3>巴比伦花海</h3>
					<p>365天花期不断档的人间仙境</p>
				</div>
			</div>
			<div style="opacity: 1;">
				<img src="./首页aaa_files/o4.png">
				<div class="box"></div>
				<div class="text">
					<h3>苏格兰马道</h3>
					<p>给你油画般的英伦骑士范</p>
				</div>
			</div>
			<div style="opacity: 1;">
				<img src="./首页aaa_files/o5.png">
				<div class="box"></div>
				<div class="text">
					<h3>欧陆·戛纳明星广场</h3>
					<p>巨资打造欧陆华丽明星广场</p>
				</div>
			</div>
			<div style="opacity: 1;">
				<img src="./首页aaa_files/o6.png">
				<div class="box"></div>
				<div class="text">
					<h3>台山海景· 浪琴湾</h3>
					<p>绝美的弧形海岸线让你领略真正的碧海蓝天</p>
				</div>
			</div>
		</div>
	</div>

	<!-- 客照 -->
	<div id="guest" class="louCengShow">
		<!-- 标题 -->
		<div class="guest-title">
			<p>客 · 照 · 欣 · 赏</p>
		</div>
		<!-- 照片 -->
		<div class="guest-photos">
			<ul>
				<li class="guest-big">
					<img src="./首页aaa_files/guest1.jpg">
					<div class="shadow"></div>
					<div class="draw">
						<p class="l11"></p>
						<p class="l12"></p>
						<p class="l21"></p>
						<p class="l22"></p>
						<h1>A先生 &amp; A女士</h1>
					</div>
				</li>
				<li class="guest-small">
					<img src="./首页aaa_files/guest2.jpg">
					<div class="shadow"></div>
					<div class="draw">
						<p class="l11"></p>
						<p class="l12"></p>
						<p class="l21"></p>
						<p class="l22"></p>
						<h3>A先生 &amp; A女士</h3>
					</div>
				</li>
				<li class="guest-small">
					<img src="./首页aaa_files/guest3.jpg">
					<div class="shadow"></div>
					<div class="draw">
						<p class="l11"></p>
						<p class="l12"></p>
						<p class="l21"></p>
						<p class="l22"></p>
						<h3>A先生 &amp; A女士</h3>
					</div>
				</li>
				<li class="guest-small">
					<img src="./首页aaa_files/guest4.jpg">
					<div class="shadow"></div>
					<div class="draw">
						<p class="l11"></p>
						<p class="l12"></p>
						<p class="l21"></p>
						<p class="l22"></p>
						<h3>A先生 &amp; A女士</h3>
					</div>
				</li>
				<li class="guest-small">
					<img src="./首页aaa_files/guest5.jpg">
					<div class="shadow"></div>
					<div class="draw">
						<p class="l11"></p>
						<p class="l12"></p>
						<p class="l21"></p>
						<p class="l22"></p>
						<h3>A先生 &amp; A女士</h3>
					</div>
				</li>
				<li class="guest-big">
					<img src="./首页aaa_files/guest6.jpg">
					<div class="shadow"></div>
					<div class="draw">
						<p class="l11"></p>
						<p class="l12"></p>
						<p class="l21"></p>
						<p class="l22"></p>
						<h1>A先生 &amp; A女士</h1>
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>
	<!-- 底部 -->
	<footer id="footer"><!-- 此文件用于响应客户端的加载页面通用底部的请求 -->

<div class="footer-logo">
  <img src="./首页aaa_files/logo.png">
</div>
<ul class="footer-nav clear">
  <li>
    <a href="javascript:;">联系我们</a>
    <span>|</span>
  </li>
  <li>
    <a href="javascript:;">订购帮助</a>
    <span>|</span>
  </li>
  <li>
    <a href="javascript:;">企业合作</a>
    <span>|</span>
  </li>	
  <li>
    <a href="javascript:;">生产经营资质</a>
  </li>
</ul>
<p>专线：400 000 0000(服务时间8:00-22:00)</p>
<p>网站注册公司名称: 杭州摄影有限公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司地址: 杭州西湖区城西银泰3楼301</p>
<p> Copyright 2017-2027 版权所有 浙ICP备14005698号</p></footer>

	<!-- 右侧侧边栏 -->
    <div id="right-nav">
        <a href="http://www.codeboy.com/pro/jin/#header" class="">顶&nbsp;&nbsp;部</a>
        <a href="http://www.codeboy.com/pro/jin/#sample" class="light">全新样照</a>
        <a href="http://www.codeboy.com/pro/jin/#venue" class="">场馆介绍</a>
        <a href="http://www.codeboy.com/pro/jin/#outdoor" class="">人气外景</a>
        <a href="http://www.codeboy.com/pro/jin/#guest" class="">客照欣赏</a>
    </div>

	<script src="./首页aaa_files/jquery.js.下载"></script>
	<script src="./首页aaa_files/loadHeader.js.下载"></script>
	<script src="./首页aaa_files/index_search.js.下载"></script>
	<script src="./首页aaa_files/banner.js.下载"></script>
	<script src="./首页aaa_files/sample_big.js.下载"></script>
	<script src="./首页aaa_files/outdoor.js.下载"></script>
	<script src="./首页aaa_files/louCeng.js.下载"></script>
	<script src="./首页aaa_files/loadFooter.js.下载"></script>
	<!--头部JS3D翻页-->
  <script>
      /*避免全局变量污染 加了()内部变量外面调用不了 */
      (function() {
         var oBody = document.querySelector('body'), //用于背景轮播
             oLeft = document.querySelector('.left'),
             oWrap = document.querySelector('.wrap'),
             oPrev = document.querySelector('.prev'),
             oNext = document.querySelector('.next'),
             oRighr= document.querySelector('.right') ; /*获取css3的方法*/
             index=0; //第几张图片 0代表第一张
             isClick= false;//判断图片是否点击
             timer =null; //用于鼠标悬停时 保存值
         oWrap.onmouseenter = function(){ /*鼠标进入事件*/    
             console.log('鼠标移入了')
             clearInterval(timer);// 鼠标进入时 清除了定时器
              this.onclick = change      /*鼠标点击事件*/  
              this.onmouseleave =function(){//鼠标离开事件
                 auto();
              }      
         }
         auto();//函数调用 自动轮播
         //自动轮播函数
         function auto(){
            timer=  setInterval(change,2000);//2000毫秒 定时器
         }
         /*负责图片翻转变化*/
         function change(){    
             if(isClick) return;   //不执行下面的代码直接返回
             isClick=true; //点击成功一次
             index ++;//点击变换下一张图
             index %= 3;
             oLeft.classList.add('on');//添加旋转类名
             document.addEventListener('transitionend',function(){                 
                 oLeft.classList.remove('on');
                 oWrap.style.backgroundImage =                   
                 oPrev.style.backgroundImage = 
                 oBody.style.backgroundImage =       
                 'url("img/im' + index + '.jpg")';//可以写一起
                 oNext.style.backgroundImage = 
                 oRighr.style.backgroundImage =
                 'url("img/im' + (index+1) % 3 + '.jpg")';//可以写一起
                 isClick=false; //点击后执行完毕
             });//addEventListener事件监听 transitionend(过渡结束))
           
         }
      })();       
  </script>
</body></html>